<template>
  <div id="detail">
    <p class="jsdetail">结算单明细</p>

    <div class="detailheader">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="supplierName" label="供应商名称" />
        <el-table-column prop="sendDate" label="发送日期" />
        <el-table-column prop="ensureDate" label="确认日期" />
        <el-table-column prop="statementDate" label="结算日期" />
        <el-table-column prop="ensureMan" label="确认人" />
        <el-table-column prop="statementMan" label="结算人" />
        <el-table-column prop="payType" label="付款方式">
          <template slot-scope="scope">
            {{ scope.row.payType | payTypeFitlter }}
          </template>
        </el-table-column>
        <el-table-column prop="totalStatementPrice" label="结算金额" />
        <el-table-column prop="status" label="结算状态">
          <template slot-scope="scope">{{
            scope.row.status | statusFitlter
          }}</template>
        </el-table-column>
        <el-table-column prop="taxRate" label="税率">
          <template slot-scope="scope">{{
            scope.row.taxRate | taxRateFitlter
          }}</template>
        </el-table-column>
      </el-table>
    </div>

    <div class="btn">
      <el-button
        type="primary"
        class="uploadattach"
        @click="centerDialogVisible = true"
        v-if="!accessory"
        :disabled="disabled"
        >结算(上传附件)</el-button
      >
      <el-button v-else type="primary" @click="ViewDialogVisible = true"
        >查看附件</el-button
      >
    </div>

    <div class="table">
      <el-table
        :data="datadetail"
        border
        style="width: 100%"
        :summary-method="getSummaries"
        show-summary
      >
        <el-table-column type="index" width="auto" label="序号" />
        <el-table-column prop="goodsId" width="auto" label="商品ID" />
        <el-table-column prop="goodsName" width="auto" label="商品名称" />
        <el-table-column prop="goodsNum" width="auto" label="数量" />
        <el-table-column prop="units" width="auto" label="辅助单位" />
        <el-table-column prop="weight" width="auto" label="实际重量(kg)" />
        <el-table-column prop="price" width="auto" label="单价" />
        <el-table-column prop="totalPrice" width="auto" label="结算金额" />
      </el-table>
    </div>

    <!-- 上传附件弹框 -->
    <el-dialog
      title="上传/查看附件"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <!-- 图片上传 -->
      <el-upload
        class="avatar-uploader"
        action="http://sun.xinlinju.net/oss/upload"
        :headers="headers"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        style="text-align:center"
      >
        <img
          v-if="imageUrl"
          :src="imageUrl"
          class="avatar"
          style="width: 180px; height: 180px"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="uploadAccessory()">确 认</el-button>
        <el-button @click="centerDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 查看附件弹框 -->
    <el-dialog
      title="查看附件"
      :visible.sync="ViewDialogVisible"
      width="30%"
      center
    >
      <div class="demo-image__preview" style="text-align:center">
        <el-image
          style="width: 180px; height: 180px"
          :src="url"
          :preview-src-list="srcList"
        >
        </el-image>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { uploadAccessory, getaccountDetail } from "@/api/account.js";
import { getToken } from "@/utils/auth";
export default {
  filters: {
    statusFitlter(value) {
      if (value === 0) {
        return "待确认";
      } else if (value === 1) {
        return "已发送";
      } else if (value === 2) {
        return "已结算";
      } else if (value === 3) {
        return "已确认";
      }
    },
    taxRateFitlter: value => {
      return value + "%";
    },
    payTypeFitlter(value) {
      if (value === 0) {
        return "现金";
      } else if (value === 1) {
        return "银行转账";
      } else if (value === 2) {
        return "移动支付";
      }
    }
  },
  data() {
    return {
      centerDialogVisible: false,
      ViewDialogVisible: false,
      headers: {
        token: getToken()
      },
      imageUrl: "",
      accessory: "",
      url: "",
      srcList: [],
      tableData: [],
      datadetail: [],
      trTotalPrice: "",
      disabled: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res, file);
      this.imageUrl = res.extParams.path;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    init() {
      var statementId = { statementId: this.$route.query.statementId };
      // 获取结算单明细
      getaccountDetail(statementId)
        .then(res => {
          console.log(res);
          this.trTotalPrice = res.data.trTotalPrice;
          var arr = [];
          arr.push(res.data);
          this.tableData = arr;
          this.datadetail = res.data.statementGoodsList;
          this.accessory = res.data.accessory;
          if (res.data.status === 0) {
            this.disabled = true;
          }
          if (!this.accessory) {
            console.log("上传图片");
          } else {
            this.url = this.imageUrl = this.accessory;
            //  = this.accessory
            var arr = [];
            arr.push(this.accessory);
            this.srcList = arr;
          }
        })
        .catch(err => {
          console.log(err);
        });
      // console.log(this.tableData);
    },
    // 合计列
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      var goodsNum = 0;
      var ta = 0;
      data.map(item => {
        goodsNum += Number(item.goodsNum);
        ta += Number(item.weight);
        return { goodsNum, ta };
      });
      columns.forEach((column, index) => {
        sums[2] = "合计数量";
        sums[3] = goodsNum;
        sums[4] = "合计重量";
        sums[5] = ta;
        sums[6] = "合计金额(含税)";
        sums[7] = this.trTotalPrice;
      });

      return sums;
    },
    // 上传附件
    uploadAccessory() {
      var data = {
        accessory: this.imageUrl,
        statementId: this.$route.query.statementId
      };
      uploadAccessory(data)
        .then(res => {
          console.log(res);
          if (res.code === 20000) {
            this.$message({
              message: "上传成功",
              type: "success"
            });
            this.centerDialogVisible = false;
            this.init();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
#detail {
  padding: 20px 20px;
  .jsdetail {
    font-size: 22px;
    margin-bottom: 60px;
  }
  .btn {
    text-align: right;
    margin: 30px;
  }
  .detailheader {
    margin: 20px 0px 50px;
  }
}
</style>
